<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 载入文章头部页面，位置在/client文件夹下的header模板页面，模板名称th:fragment为header -->
<div th:replace="/client/header::header(null,null)" ></div>
<body>
<div class="am-g am-g-fixed blog-fixed index-page">
    <div class="am-u-md-8 am-u-sm-12">

        <!-- 文章遍历并分页展示 : 需要同学们手动完成，基本样式已经给出，请使用th标签及表达式完成页面展示 -->
        <div th:each="article:${articlePage.records}">
            <article class="am-g blog-entry-article">

                <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-text">
                    <!-- 文章分类 -->
                    <span class="blog-color"style="font-size: 15px;"><a><span th:text="${article.categories}"></span></a></span>
                    <span>&nbsp;&nbsp;&nbsp;</span>
                    <!-- 发布时间 -->
                    <span style="font-size: 15px;" th:text="'发布于 '+ ${article.created}" ></span>
                    <h2>
                        <!-- 文章标题 -->
                        <div>
                            <a style="color: #0f9ae0;font-size: 20px;" th:text="${article.title}" ></a>
                        </div>
                    </h2>
                    <!-- 文章内容-->
                    <div style="font-size: 16px;" th:text="${article.content}" ></div>
                </div>
            </article>
        </div>

        <!-- 分页 -->
        <div th:if="${articlePage.pages>0}">
            <!--当前页码-->
            <span th:text="'当前页:'+${articlePage.current}"></span>
            &nbsp;&nbsp;

            <!--首页，当前页为第一页时，不可点击-->
            <a th:href="@{http://localhost:8080/article/index(pageNum=1)}">首页</a>

            <!--上一页，当前页为第一页时，不可点击-->
            <span th:if="${articlePage.current == 1}">
                <a onclick="return false;">上一页</a>
            </span>
            <span th:unless="${articlePage.current ==1}">
                <a th:href="@{http://localhost:8080/article/index(pageNum=${articlePage.current -1})}">上一页</a>
            </span>

            <!--遍历页码-->
            <span th:each="i:${#numbers.sequence(1,articlePage.pages)}">
                <a th:href="@{http://localhost:8080/article/index(pageNum=${i})}" th:text="${i}">1</a>
            </span>

            <!--下一页，当前页为最后一页时，不可点击-->
            <span th:if="${articlePage.pages == articlePage.current}">
                <a onclick="return false;">下一页</a>
            </span>
            <span th:unless="${articlePage.pages == articlePage.current}">
                <a th:href="@{http://localhost:8080/article/index(pageNum=${articlePage.current +1})}">下一页</a>
            </span>

            <!--末页-->
            <a th:href="@{http://localhost:8080/article/index(pageNum=${articlePage.pages})}">末页</a>

            &nbsp;&nbsp;
            <!--总条数-->
            <span th:text="'总条数:'+${articlePage.total}"></span>

        </div>



    </div>
    <!-- 博主信息描述 -->
    <div class="am-u-md-4 am-u-sm-12 blog-sidebar">
        <div class="blog-sidebar-widget blog-bor">
            <h2 class="blog-text-center blog-title"><span>灵台方寸山 斜月三星洞</span></h2>
            <img th:src="@{/assets/img/me.jpg}" alt="about me" class="blog-entry-img"/>
            <p>
                Java后台开发
            </p>
            <p>个人博客小站，主要发表关于Java、Spring、Docker等相关文章</p>
        </div>
        <div class="blog-sidebar-widget blog-bor">
            <h2 class="blog-text-center blog-title"><span>联系我</span></h2>
            <p>
                <a><span class="am-icon-github am-icon-fw blog-icon"></span></a>
                <a><span class="am-icon-weibo am-icon-fw blog-icon"></span></a>
            </p>
        </div>
    </div>
</div>
</body>
<!-- 载入文章尾部页面，位置在/client文件夹下的footer模板页面，模板名称th:fragment为footer -->
<div th:replace="/client/footer::footer" ></div>
</html>
